<template>
  <a-modal v-model:visible="visible" title="修改密码" :maskClosable="false" :footer="null">
    <a-form :label-col="labelCol">
      <a-form-item label="旧密码" v-bind="validateInfos.oldPass">
        <a-input
          v-model:value="formState.oldPass"
          placeholder="请输入旧密码"
          type="password"
          autocomplete="off"
        />
      </a-form-item>
      <a-form-item label="新密码" v-bind="validateInfos.newPass">
        <a-input
          v-model:value="formState.newPass"
          placeholder="请输入新密码"
          type="password"
          autocomplete="off"
        />
      </a-form-item>
      <a-form-item label="确认密码" v-bind="validateInfos.confirmPass">
        <a-input
          v-model:value="formState.confirmPass"
          placeholder="请再次输入新密码"
          type="password"
          autocomplete="off"
        />
      </a-form-item>
      <a-form-item style="margin-bottom: 0px; margin-top: 40px; text-align: right">
        <a-button type="primary" @click.prevent="onSubmit">确认</a-button>
        <a-button style="margin-left: 10px" @click="resetFields">重置</a-button>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive, toRaw, watch } from 'vue';
  import type { RuleObject } from 'ant-design-vue/es/form';
  import { Form, notification } from 'ant-design-vue';
  import { useUserStore } from '/@/store/modules/user';
  import { updatePassApi } from '/@/api/user';

  const formState = reactive<{
    oldPass: string;
    newPass: string;
    confirmPass: string;
  }>({
    oldPass: '',
    newPass: '',
    confirmPass: '',
  });
  let validatePass = async (_rule: RuleObject, value: string) => {
    if (value === '') {
      return Promise.reject('请输入密码');
    } else {
      if (formState.confirmPass !== '' && value !== formState.confirmPass) {
        return Promise.reject('两次密码输入不匹配');
      }
      return Promise.resolve();
    }
  };
  let confirmPass = async (_rule: RuleObject, value: string) => {
    if (value === '') {
      return Promise.reject('请再次输入确认密码');
    } else if (value !== formState.newPass) {
      return Promise.reject('两次密码输入不匹配');
    } else {
      return Promise.resolve();
    }
  };
  const rulesRef = reactive({
    oldPass: [{ required: true, message: '请输入旧密码', trigger: 'change' }],
    newPass: [{ required: true, validator: validatePass, trigger: 'change' }],
    confirmPass: [{ required: true, validator: confirmPass, trigger: 'change' }],
  });
  const useForm = Form.useForm;
  const { validate, resetFields, validateInfos } = useForm(formState, rulesRef);
  const userStore = useUserStore();
  export default defineComponent({
    components: {},
    setup() {
      const visible = ref<boolean>(false);
      watch(visible, (newVal, _oldVal) => {
        if (!newVal) {
          resetFields();
        }
      });
      const open = () => {
        visible.value = true;
      };

      const onSubmit = (_e: MouseEvent) => {
        validate()
          .then(async () => {
            const user = toRaw(formState);
            try {
              await updatePassApi({ ...user });
              notification['success']({
                message: '密码修改成功，请重新登录',
                duration: 3,
              });
              setTimeout(() => {
                userStore.LogOutAction();
              }, 1500);
              visible.value = false;
            } catch (error) {}
          })
          .catch((err) => {
            console.log('error', err);
          });
      };
      return {
        visible,
        open,
        validateInfos,
        formState,
        labelCol: { style: { width: '80px' } },
        wrapperCol: { span: 14 },
        onSubmit,
        resetFields,
      };
    },
  });
</script>
